<template>
  <view class="package_sale space-between" style="padding-top:0px" v-if="listAll">
    <view style="width: 33%;" v-for="(item,index) in listAll" :key="index">
      <view class="charts-box">
        <qiun-data-charts type="ring" :opts="opts" :chartData="item.data" />
      </view>
      <view class="center">
        <view class="but" style="background-color:#1890FF;"></view>
        <view style="font-size: 26rpx;">活跃：{{item.data.series[0].data[0].value}}</view>
      </view>
      <view class="center" style="margin-top:8rpx;">
        <view class="but" style="background-color:#91CB74;"></view>
        <view style="font-size: 26rpx;">不活跃：{{item.data.series[0].data[1].value}}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getUserData } from '@/gql/earthPushing/custom';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const listAll = ref([])
  const opts = {
    legend: {
      show: false
    },
    title: {
      name: "活跃度",
      fontSize: 10,
      color: "#666666"
    },
    subtitle: {
      name: "80%",
      fontSize: 15,
      color: "#7cb5ec"
    },
    extra: {
      ring: {
        ringWidth: 15,
        customRadius: 45,
      }
    }
  }
  init()
  function init() {
    const payload = {
      query: getUserData,
      variables: {
        staff_id,
      },
    };
    toPublish(
      'ql/staff/getUserData',
      payload,
      (obj : any) => {
        const { getUserData } = obj.data;
        getUserData && getUserData.length > 0 ? getUserData.map((item : any) => {
          item.data = { series: [{ data: item.data }] }
        }) : ''
        opts.subtitle.name=getUserData[0].data.series[0].data[0].value
        listAll.value = getUserData
      },
    );
  }
  defineExpose({
    init
  });
</script>

<style scoped lang="less">
  .charts-box {
    height: 210rpx;
  }

  .but {
    width: 25rpx;
    height: 25rpx;
    margin-right: 20rpx;
  }
</style>